<template>
  <div class="shop_list">
    <div class="list" @click="shopLisTap(index)" data-ind="index" v-for="(item,index) in list">
      <div class="list_left">
        <img :src="item.url" alt>
      </div>
      <div class="list_center">{{item.name}}</div>
      <div class="list_right">
        <i class="iconfont iconrightArrow"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          url: require("../../static/image/MW01.png"),
          name: "客户订单"
        },
        {
          url: require("../../static/image/MW02.png"),
          name: "店铺编辑"
        },
        {
          url: require("../../static/image/MW03.png"),
          name: "店铺预览"
        },
        {
          url: require("../../static/image/MW04.png"),
          name: "发布商品"
        },
        {
          url: require("../../static/image/MW05.png"),
          name: "商品管理"
        },
        {
          url: require("../../static/image/MW06.png"),
          name: "数据统计"
        }
      ]
    };
  },
  methods: {
    shopLisTap(ind) {
      console.log(ind);
      switch (ind) {
        case 0:
          this.$router.push("/myorder");
          break;
        case 1:
          this.$router.push("/editShop");
          break;
        case 3:
          this.$router.push({path:'/addGoods',query:{goods_id:0}});
          break;
          case 4:
          this.$router.push({path:"/goodsAdmin",query:{inds:0}})
          break;
        case 5:
          this.$router.push("/datacount");
          break;
      }
    }
  },
  components: {}
};
</script>

<style scoped lang='less'>
.list {
  height: 3rem;
  width: 100%;
  padding: 0 1rem;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #efefef;
  transition: 0.4s;
  &:active {
    background: @bg_color;
  }
  &:last-child {
    border-bottom: 0;
  }
  .list_left {
    height: 100%;
    width: 2.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      height: 2rem;
      width: 2rem;
    }
  }
  .list_center {
    width: calc(100% - 5rem);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.7rem;
  }
  .list_right {
    width: 2.5rem;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .iconfont {
      font-size: 1.2rem;
    }
  }
}
</style>
